<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Eagle Eye</title>
	<link rel="stylesheet" type="text/css" href="styles/notimoo-v1.2.1.css" />
	<link rel="stylesheet" type="text/css" href="styles/menu_canvas.css" />
    <link rel="stylesheet" href="theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
#NewsTicker{
	border:solid 1px #cccccc;
	background:#eaf5e0;
	width:1000px;
	height:100px;
	margin:0 auto;
}
	#NewsTicker h1{
		padding:6px; margin:0; border:0;
		background:#dfe9d5;
		color:#000000;
		font-size:11px;
		font-weight:bold;
	}
	#NewsVertical {
	width: 1000px;
	height: 30px;
	display: block;
	overflow: hidden;
	position: relative;
	}
	#controller{
	padding:6px;
	font-size:11px;
	color:#666;
	}
	#play_scroll_cont{display:none;}
/* --------------- */
/* Ticker Vertical */
	#TickerVertical {
		width: 1000px;
		height: 30px;
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#TickerVertical li {
		display: block;
		width: 988px;
		color: #333333;
		text-align: left;
		font-size: 11px;
		margin: 0;
		padding: 6px;
		float: left;
	}
		#TickerVertical li .NewsTitle{
			display: block;
			color: #000000;
			font-size: 12px;
			font-weight:bold;
			margin-bottom:6px;
		}
		#TickerVertical li .NewsTitle a:link,
		#TickerVertical li .NewsTitle a:Visited {
			display: block;
			color: #000000;
			font-size: 12px;
			font-weight:bold;
			margin-bottom:6px;
			text-decoration:none;
		}
		#TickerVertical li .NewsTitle a:hover {
			text-decoration:underline;
		}
		
		#TickerVertical li .NewsImg{
			float:left;
			margin-right:10px;
		}
		#TickerVertical li .NewsFooter{
			display: block;
			color: #000000;
			font-size: 10px;
			margin:6px 0 14px 0;
		}	
		

       #map {
                margin: 0;
                width: 1200px;
                height:600px;
            }
        #controls {
            width: 812px;
        }
        #controlToggle {
            padding-left: 1em;
        }
        #controlToggle li {
            list-style: none;
        }
        /* round corners of layer switcher, and make it transparent */
        .olControlLayerSwitcher .layersDiv {
            border-radius: 10px 0 0 10px;
            opacity: 0.75;
            filter: alpha(opacity=75);
        }
    </style>
<script type="text/javascript" src="mootools-1.2.5.js"></script>
<script type="text/javascript" src="moocanvas.js"></script>
<!--script type="text/javascript" src="mif.menu-trunk2.js"></script-->
<script type="text/javascript" src="ticker.js"></script>
<script type="text/javascript" src="notimoo.js"></script>
<script type="text/javascript" src="../bat/ws.js"></script>	
<script type="text/javascript" src="../cfg.js"></script>	

<!-- script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script-->
<script src="OpenLayers.js"></script>
<!--  script type="text/javascript" src="ol.js"></script-->

    <script type="text/javascript">
        var map, vectors, controls,layer;
        var SHADOW_Z_INDEX = 10;
        var MARKER_Z_INDEX = 11;
        
        var DIAMETER = 200;
        var NUMBER_OF_FEATURES = 15;
        var mc={};
        var selectControl, selectedFeature;
        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
        	if(selectedFeature){
        		onFeatureUnselect(selectedFeature);
        	}
            selectedFeature = feature;
            var oit = feature.o.items.map;
            var img = "";
            if(oit._attach_1){
            	img = "<br><img src=\"/ipcm/servlet/fu?f="+oit._attach_1[0].path+"\">";
            }
            var loc_name ="<br>地点: " + oit.name;
            if(oit._attach_2){
            	loc_name="<a target=\"_topmap\" href=\"/ipcm/servlet/fu?f="
            		+oit._attach_2[0].path+"\">" +loc_name+"</a>";
            }
            popup = new OpenLayers.Popup.FramedCloud("popup", 
              feature.geometry.getBounds().getCenterLonLat(),
                null,
               //"<div style='font-size:.8em'>图元: " + feature.id +
               loc_name
               +img
               +"</div>",
            	//feature,
            	null,
            	true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
        	if(!feature.popup){
        		return;
        	}
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }    

        function init(){
            // allow testing of specific renderers via "?renderer=Canvas", etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

            layer = new OpenLayers.Layer.Vector(
                "环测分布点",
                {
                    styleMap: new OpenLayers.StyleMap({
                        // Set the external graphic and background graphic images.
                        externalGraphic: "img/marker-gold.png",
                        backgroundGraphic: "img/marker_shadow.png",
                        
                        // Makes sure the background graphic is placed correctly relative
                        // to the external graphic.
                        backgroundXOffset: 0,
                        backgroundYOffset: -7,
                        
                        // Set the z-indexes of both graphics to make sure the background
                        // graphics stay in the background (shadows on top of markers looks
                        // odd; let's not do that).
                        graphicZIndex: MARKER_Z_INDEX,
                        backgroundGraphicZIndex: SHADOW_Z_INDEX,
                        
                        pointRadius: 10
                    }),
                   // isBaseLayer: true,
                    rendererOptions: {yOrdering: true},
                    renderers: renderer
                }
            );
            

            map = new OpenLayers.Map({
                div: "map",
                projection: "EPSG:900913",
                displayProjection: "EPSG:4326",
                numZoomLevels: 18
            });

            // create Google Mercator layers
/*            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: google.maps.MapTypeId.TERRAIN}
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
            );*/

            // create Bing layers

            // API key for http://openlayers.org. Please get your own at
            // http://bingmapsportal.com/ and use that instead.
            var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

            var veroad = new OpenLayers.Layer.Bing({
                key: apiKey,
                type: "Road",
                wrapDateLine: true
            });
            var veaer = new OpenLayers.Layer.Bing({
                key: apiKey,
                type: "Aerial",
                wrapDateLine: true
            });
            var vehyb = new OpenLayers.Layer.Bing({
                key: apiKey,
                type: "AerialWithLabels",
                wrapDateLine: true
            });

            // create OSM layers
            var mapnik = new OpenLayers.Layer.OSM();
            
            map.div.oncontextmenu = function () { return false;}            
            //OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

          map.addLayers([
                        // gphy,gmap, gsat, ghyb,
                         vehyb, veroad, veaer, mapnik,
                        layer
                         ]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            //map.addControl(new OpenLayers.Control.OverviewMap());            
             
            selectControl = new OpenLayers.Control.SelectFeature(layer,
                {hover:false,onSelect: onFeatureSelect, onUnselect: onFeatureUnselect });
            
            map.addControl(selectControl);
            selectControl.activate();
                       
 
          	
          map.setCenter(new OpenLayers.LonLat(116.46, 39.92).transform(
  		        new OpenLayers.Projection("EPSG:4326"),
  		        map.getProjectionObject()
  		    ), 11);
       
        	var wsc = New(WSClient,[getWSURL(),10000,["PR_DAO","PR_SYS_HEART"]]);
        	wsc.setevt("onclose",function(){
        		mc.noti.show({
        			sticky:false,
        			title:'['+ new Date().toLocaleString()+']服务不可用',
        			message: 'wowo,一阵风把你吹出去了'
        		});
        		//wsc.connect();
        	});
        	wsc.setevt("onopen",function(){
        		mc.noti.show({
        			sticky:false,
        			title: '['+new Date().toLocaleString()+']服务连接成功',
        			message: '它会主动向你更新状态'
        		});
        	});
        	wsc.setfunc("OLocation",function(s){
        		switch(s.action){
        		case 'A':
        			//addLocation(s);
        			break;
        		case 'R':
        			removeLocation(s);
        			break;
        		case 'U':
        			updateLocation(s);
        			break;
        		}
        	});
        	wsc.setfunc("ODevice",function(s){
        		//mc.noti.show({title:'ODevice',message:s.key});
        		switch(s.action){
        		case 'A':
        			//addDevice(s);
        			break;
        		case 'R':
        			removeLocation(s);
        			break;
        		case 'U':
        			updateLocation(s);
        			break;
        		}
        	});
        	wsc.setfunc("PR_SYS_END",function(s){
        		//Reset status
          		if(s.pr!="PR_DAO"){
          			return;
          		}
        		layer.removeAllFeatures();
        		if(mc.ticker){
        			mc.ticker.pause();
            		var pa = $('TickerVertical');
            		while(pa.lastChild){
            			pa.removeChild(pa.lastChild);
            		}        			
        		}
        		//初始快照数据结束,可以初始化了
        		var map_loc = mc.wsc.getStateByCn("dao.hb.OLocation");
        		var features = [];
        		for(x in map_loc){
        			addLocation(map_loc[x],features);
        		}
        		layer.addFeatures(features);
        		if(!mc.ticker){
	        	  	mc.ticker = new NewsTicker('TickerVertical', {
	        	      speed : 500, delay : 4000,
	        	      no_mouse_pause: false});
        		}else{
        			mc.ticker.initialize('TickerVertical');
        		}
        		var map_dev = mc.wsc.getStateByCn("dao.hb.ODevice");
        		for(x in map_dev){
        			//addDevice(map_dev[x]);
        		}
        		var map_attachment = mc.wsc.getStateByCn("dao.hb.OAttachment");
        		for(x in map_attachment){
        			var cur = map_attachment[x];
        			var its = cur.items.map;
        			var entity =mc.wsc.getState(its.entityName,its.entityName+"@"+its.entityId);
        			if(!entity){
        				continue;
        			}
        			var ets = entity.items.map;
        			var itn = "_attach_"+its.stype;
        			var ets_itn = ets[itn];
        			if(ets_itn){
        				ets_itn.join(its);
        			}else{
        				ets[itn] = [its];
        			}
        		}
        	});
            mc.noti= new Notimoo();        
        	wsc.connect();
        	mc.wsc =wsc;
        }
        

        
     function focus_Loc(o) {
     	var its = o.items.map;
      	var lonLat1 = new OpenLayers.LonLat(its.bw, its.bn).transform(
		        new OpenLayers.Projection("EPSG:4326"),
		        map.getProjectionObject()
		    );
      	var lonLat2 = new OpenLayers.LonLat(its.be, its.bs).transform(
		        new OpenLayers.Projection("EPSG:4326"),
		        map.getProjectionObject()
		    );
     	map.zoomToExtent(new OpenLayers.Bounds(lonLat1.lon,lonLat1.lat,lonLat2.lon,lonLat2.lat));
     	//map.zoomToExtent(new OpenLayers.Bounds(its.bw,its.bn,its.be,its.bs));
     	onFeatureSelect(o.fv);
     }
     function addLocation(s,features){
      	var its = s.items.map;
      	var pid= s.key;
      	var item_li = new Element ( 'li' );	
      	var item_span = new Element ( 'span',{class:'NewsTitle'} );
      	var item_a = new Element ( 'a',{href:'###',text:its.name+" 经度:"+its.be+" 纬度:"+its.bn,o:s} );
      	item_a.o = s;
       	//$(pid).o = s;
       	//$(pid).mnu = attachmenu(pid);
       	item_a.onclick=function(){
      		focus_Loc(this.o);
       		return false;
       	}
      	item_span.appendChild(item_a);
      	item_li.appendChild(item_span);
      	$('TickerVertical').appendChild(item_li);
      	
      	var lonLat = new OpenLayers.LonLat((its.be-its.bw)/2+its.bw, (its.bn-its.bs)/2+its.bs).transform(
		        new OpenLayers.Projection("EPSG:4326"),
		        map.getProjectionObject()
		    );
      	
      	var fv = new OpenLayers.Feature.Vector(
      			new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
                  //new OpenLayers.Geometry.Point((its.be-its.bw)/2+its.bw, (its.bn-its.bs)/2+its.bs)
                  );
			fv.o=s;
			s.fv = fv;
          features.push(fv);
     }
      </script>
  </head>
  <body onload="init()">
  
<div id="NewsVertical">
	  <ul id="TickerVertical">
     </ul>
    </div>
</div>
    <div id="map" class="smallmap"></div>
   </body>
</html>
